<template>
	<view class="news-container">
		<!-- 头部搜索栏 -->
		<view class="search-header">
			<view class="search-box">
				<image src="/static/images/search.png" class="search-icon"></image>
				<input 
					type="text" 
					placeholder="搜索新闻..." 
					v-model="searchKeyword"
					@input="onSearch"
					class="search-input"
				/>
			</view>
		</view>
		
		<!-- 新闻分类标签 -->
		<view class="category-tabs">
			<scroll-view scroll-x="true" class="tabs-scroll">
				<view class="tabs-container">
					<view 
						class="tab-item" 
						:class="{ active: currentCategory === item.key }"
						v-for="item in categories" 
						:key="item.key"
						@click="switchCategory(item.key)"
					>
						{{ item.name }}
					</view>
				</view>
			</scroll-view>
		</view>
		
		<!-- 新闻列表 -->
		<view class="news-list">
			<view 
				class="news-item" 
				v-for="(news, index) in filteredNewsList" 
				:key="news.id"
				@click="goToDetail(news)"
			>
				<view class="news-image">
					<image :src="news.image" mode="aspectFill" class="image"></image>
					<view class="category-tag" :class="'tag-' + news.category">
						{{ getCategoryName(news.category) }}
					</view>
				</view>
				<view class="news-content">
					<view class="news-title">{{ news.title }}</view>
					<view class="news-summary">{{ news.summary }}</view>
					<view class="news-meta">
						<view class="news-time">{{ news.publishTime }}</view>
						<view class="news-views">
							<image src="/static/images/eye.png" class="eye-icon"></image>
							<text>{{ news.views }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 加载更多 -->
		<view class="load-more" v-if="hasMore" @click="loadMore">
			<text>{{ loading ? '加载中...' : '加载更多' }}</text>
		</view>
		
		<!-- 空状态 -->
		<view class="empty-state" v-if="!loading && filteredNewsList.length === 0">
			<image src="/static/images/empty-news.png" class="empty-image"></image>
			<text class="empty-text">暂无新闻</text>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			searchKeyword: '',
			currentCategory: 'all',
			loading: false,
			hasMore: true,
			page: 1,
			pageSize: 10,
			// 新闻分类
			categories: [
				{ key: 'all', name: '全部' },
				{ key: 'company', name: '公司动态' },
				{ key: 'industry', name: '行业资讯' },
				{ key: 'policy', name: '政策解读' },
				{ key: 'technology', name: '技术前沿' }
			],
			// 新闻列表数据
			newsList: [
				{
					id: 1,
					title: '公司新产品发布，引领行业创新',
					summary: '公司最新产品系列正式发布，涵盖多个行业应用场景，为客户提供更优质的解决方案。',
					image: '/static/images/news1.jpg',
					category: 'company',
					publishTime: '2024-01-15',
					views: 1256,
					content: '详细内容...'
				},
				{
					id: 2,
					title: '年度总结大会成功召开',
					summary: '公司年度总结大会成功召开，回顾过去一年的成就，展望未来发展蓝图。',
					image: '/static/images/news2.jpg',
					category: 'company',
					publishTime: '2024-01-10',
					views: 892,
					content: '详细内容...'
				},
				{
					id: 3,
					title: '员工培训计划正式启动',
					summary: '新一年员工培训计划正式启动，提升员工专业技能和综合素质。',
					image: '/static/images/news3.jpg',
					category: 'company',
					publishTime: '2024-01-08',
					views: 634,
					content: '详细内容...'
				},
				{
					id: 4,
					title: '客户满意度调查结果公布',
					summary: '最新客户满意度调查结果显示，客户满意度达到95%以上，创历史新高。',
					image: '/static/images/news4.jpg',
					category: 'company',
					publishTime: '2024-01-05',
					views: 1456,
					content: '详细内容...'
				},
				{
					id: 5,
					title: '行业发展趋势分析报告',
					summary: '深度分析当前行业发展趋势，为未来发展提供参考依据。',
					image: '/static/images/news5.jpg',
					category: 'industry',
					publishTime: '2024-01-03',
					views: 2341,
					content: '详细内容...'
				}
			]
		}
	},
	computed: {
		// 过滤后的新闻列表
		filteredNewsList() {
			let filtered = this.newsList
			
			// 按分类过滤
			if (this.currentCategory !== 'all') {
				filtered = filtered.filter(item => item.category === this.currentCategory)
			}
			
			// 按关键词搜索
			if (this.searchKeyword) {
				const keyword = this.searchKeyword.toLowerCase()
				filtered = filtered.filter(item => 
					item.title.toLowerCase().includes(keyword) || 
					item.summary.toLowerCase().includes(keyword)
				)
			}
			
			return filtered
		}
	},
	onLoad() {
		this.loadNewsList()
	},
	methods: {
		// 加载新闻列表
		loadNewsList() {
			this.loading = true
			// 模拟API调用
			setTimeout(() => {
				this.loading = false
			}, 1000)
		},
		
		// 切换分类
		switchCategory(category) {
			this.currentCategory = category
		},
		
		// 搜索
		onSearch() {
			// 搜索逻辑已在computed中处理
		},
		
		// 获取分类名称
		getCategoryName(category) {
			const cat = this.categories.find(item => item.key === category)
			return cat ? cat.name : '未知'
		},
		
		// 跳转到详情页
		goToDetail(news) {
			uni.navigateTo({
				url: `/pages/news/detail?id=${news.id}`
			})
		},
		
		// 加载更多
		loadMore() {
			if (this.loading) return
			this.loading = true
			// 模拟加载更多数据
			setTimeout(() => {
				this.loading = false
				this.hasMore = false // 假设没有更多数据
			}, 1000)
		}
	}
}
</script>

<style scoped>
.news-container {
	background: #f5f7fa;
	min-height: 100vh;
}

/* 搜索头部 */
.search-header {
	background: #ffffff;
	padding: 20rpx 30rpx;
	border-bottom: 1rpx solid #f0f0f0;
}

.search-box {
	display: flex;
	align-items: center;
	background: #f5f7fa;
	border-radius: 25rpx;
	padding: 0 20rpx;
	height: 70rpx;
}

.search-icon {
	width: 32rpx;
	height: 32rpx;
	margin-right: 15rpx;
}

.search-input {
	flex: 1;
	font-size: 28rpx;
	color: #333333;
}

/* 分类标签 */
.category-tabs {
	background: #ffffff;
	border-bottom: 1rpx solid #f0f0f0;
}

.tabs-scroll {
	white-space: nowrap;
}

.tabs-container {
	display: flex;
	padding: 0 30rpx;
}

.tab-item {
	padding: 20rpx 30rpx;
	font-size: 28rpx;
	color: #666666;
	white-space: nowrap;
	position: relative;
	transition: all 0.3s ease;
}

.tab-item.active {
	color: #667eea;
	font-weight: bold;
}

.tab-item.active::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 40rpx;
	height: 4rpx;
	background: #667eea;
	border-radius: 2rpx;
}

/* 新闻列表 */
.news-list {
	padding: 20rpx 30rpx;
}

.news-item {
	background: #ffffff;
	border-radius: 16rpx;
	margin-bottom: 20rpx;
	overflow: hidden;
	box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
	transition: transform 0.3s ease;
}

.news-item:active {
	transform: scale(0.98);
}

.news-image {
	position: relative;
	height: 300rpx;
	overflow: hidden;
}

.image {
	width: 100%;
	height: 100%;
}

.category-tag {
	position: absolute;
	top: 20rpx;
	left: 20rpx;
	padding: 8rpx 16rpx;
	border-radius: 20rpx;
	font-size: 22rpx;
	color: #ffffff;
}

.tag-company {
	background: #667eea;
}

.tag-industry {
	background: #f093fb;
}

.tag-policy {
	background: #4facfe;
}

.tag-technology {
	background: #43e97b;
}

.news-content {
	padding: 30rpx;
}

.news-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #333333;
	line-height: 1.4;
	margin-bottom: 15rpx;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}

.news-summary {
	font-size: 26rpx;
	color: #666666;
	line-height: 1.5;
	margin-bottom: 20rpx;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}

.news-meta {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.news-time {
	font-size: 24rpx;
	color: #999999;
}

.news-views {
	display: flex;
	align-items: center;
	font-size: 24rpx;
	color: #999999;
}

.eye-icon {
	width: 24rpx;
	height: 24rpx;
	margin-right: 8rpx;
}

/* 加载更多 */
.load-more {
	text-align: center;
	padding: 40rpx;
	font-size: 28rpx;
	color: #667eea;
}

/* 空状态 */
.empty-state {
	text-align: center;
	padding: 100rpx 0;
}

.empty-image {
	width: 200rpx;
	height: 200rpx;
	margin-bottom: 30rpx;
}

.empty-text {
	font-size: 28rpx;
	color: #999999;
}
</style>
